<template>
  <!-- 养殖操作新增
      props: tableAdd_visible：显示隐藏
      emit: closeAddDialog：关闭弹窗 -->
  <div>
    <el-dialog :title="dialogtitle" :visible.sync="tableAdd_visible" width="40%" :before-close="tableClose">
      <el-form ref="addFormRef" :model="addForm" label-width="100px" :rules="addFormRules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="操作类型" prop="type">
              <el-select v-model="addForm.type" clearable @change="selectGetType">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作名称" prop="name">
              <el-input v-model="addForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="使用状态" prop="useStatus">
              <el-select v-model="addForm.useStatus" placeholder="请选择使用状态" clearable @change="selectGetStatu">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item>
              <el-button type="primary" @click="addformOnSubmit" v-auth="'breed_job_insert'">创建</el-button>
              <el-button @click="closeform">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  // 接口数据
  import {
    newFarmingOperate
  } from "@/Api/productionmanage/BreedingOperation";

  export default {
    name: 'BeedingOperationAddForm',
    props: {
      tableAdd_visible: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        // 表单内容
        addForm: {
          name: "",
          type: "",
          useStatus: "",
        },
        // 表单规则
        addFormRules: {
          name: [{
            required: true,
            message: '请输入'
          }],
          type: [{
            required: true,
            message: '请输入'
          }],
          useStatus: [{
            required: true,
            message: '请输入'
          }],
        },
        // 表单标题
        dialogtitle: "新建养殖操作",
        // 养殖操作状态选择
        statusOptions: [{
          value: '0',
          label: '禁用'
        }, {
          value: '1',
          label: '启用'
        }],
        // 养殖操作类型选择
        typeOptions: [{
          value: '1',
          label: '养殖'
        }, {
          value: '2',
          label: '喂养'
        }, {
          value: '3',
          label: '上市'
        }],

        page: {
          current: 1,
          pageSize: 100,
        },
      }
    },
    created() {

    },
    methods: {
      // 关闭编辑弹窗
      tableClose() {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.closeform();
          })
          .catch(_ => {});
      },
      // 编辑弹窗确定
      addformOnSubmit() {
        this.$refs["addFormRef"].validate(async (valid) => {
          if (valid) {
            console.log(this.addForm);
            const {
              data: res
            } = await newFarmingOperate(this.addForm)
            if (res.statusCode === 20000) {
              this.closeform();
              this.$emit("finish")
              return this.$message.success("新增养殖操作成功");
            } else {
              console.log(res.message);
              return this.$message.error("新增养殖操作失败");
            }
          } else {
            return this.$message.error("请输入完整信息");
          }
        });
      },

      // 养殖状态选择器
      selectGetStatu(vId) {
        let obj = {};
        obj = this.statusOptions.find((item) => {
          return item.value === vId; //筛选出匹配数据
        });
        this.addForm.useStatus = obj.value;
      },
      // 养殖类型选择器
      selectGetType(vId) {
        let obj = {};
        obj = this.typeOptions.find((item) => {
          return item.value === vId; //筛选出匹配数据
        });
        this.addForm.type = obj.label;
      },
      // 关闭编辑表单弹窗
      closeform() {
        var a = false;
        this.$emit("closeAddDialog", a);
        // 清空表单
        this.resetform();
        // }
      },
      resetform() {
        this.$nextTick(() => {
          this.$refs.addFormRef.resetFields();
        })
      },

    },
  }

</script>
<style>
</style>
